import { useEffect, useState } from 'react';
import styles from '../index.module.less';
import { contractAccount } from '@/api';
import { useInterval } from 'ahooks';
import { formatNum } from '@/utils';
import { lunXunTime } from '@/utils/helper';

export default function Property() {
  const [account, setAccount] = useState<any>({});

  useEffect(() => {
    getContractAccount(); // 合约账号
  }, []);

  useInterval(() => {
    getContractAccount(); // 合约账号
  }, lunXunTime);

  // 合约账号
  async function getContractAccount() {
    const res: any = await contractAccount();
    // console.log('res: 合约账号: ', res);
    setAccount(res?.data);
  }

  return (
    <div className={`${styles.PropertyWrap} zcard pageRightWidth`}>
      <div className={`${styles.pheader} flex-v`}>资产</div>
      <div className={`${styles.plist}`}>
        <div className={`${styles.pitem} xxx`}>
          <div className={`${styles.pname} xxx`}>账户资产</div>
          <div className={`${styles.pnum} xxx`}>
            {formatNum(Number(account?.total) + Number(account?.unrealised_pnl))} USDT
          </div>
        </div>
        <div className={`${styles.pitem} xxx`}>
          <div className={`${styles.pname} xxx`}>钱包资产</div>
          <div className={`${styles.pnum} xxx`}>{formatNum(account?.total)} USDT</div>
        </div>
        <div className={`${styles.pitem} xxx`}>
          <div className={`${styles.pname} xxx`}>未实现盈亏</div>
          <div
            className={`${styles.pnum} ${account?.unrealised_pnl > 0 ? 'color-red' : 'color-green'}`}
          >
            {formatNum(account?.unrealised_pnl)} USDT
          </div>
        </div>
      </div>
      <div className={`${styles.xxx} xxx`}></div>
    </div>
  );
}
